import React, { useState, useRef } from 'react';
import { Form, Input, Button, Typography, Spin, message, Card, Row, Col, Select, Space } from 'antd';
import { CopyOutlined, RedoOutlined } from '@ant-design/icons';
import InputNumber from 'antd/es/input-number';
import CommonTour, { TourGuideButton } from '@/components/CommonTour';

const { Title, Paragraph } = Typography;
const { TextArea } = Input;
const { Option } = Select;

/**
 * 文章续写功能
 * 根据提供的文章开头，自动生成后续内容
 */
const ContinuationArticlePage: React.FC = () => {
  const [form] = Form.useForm();
  const [loading, setLoading] = useState(false);
  const [continuedContent, setContinuedContent] = useState<string>('');
  const [continuationStyle, setContinuationStyle] = useState<string>('professional');
  const [continuationLength, setContinuationLength] = useState<number>(500);
  const [tourVisible, setTourVisible] = useState<boolean>(false);

  // 创建ref引用
  const articleBeginningRef = useRef<HTMLDivElement>(null);
  const continuationStyleRef = useRef<HTMLDivElement>(null);
  const continuationLengthRef = useRef<HTMLDivElement>(null);
  const submitButtonRef = useRef<HTMLDivElement>(null);
  const continuedResultRef = useRef<HTMLDivElement>(null);

  // 组织ref引用
  const tourRefs = {
    articleBeginning: articleBeginningRef,
    continuationStyle: continuationStyleRef,
    continuationLength: continuationLengthRef,
    submitButton: submitButtonRef,
    continuedResult: continuedResultRef
  };

  // 定义steps配置
  const tourSteps = [
    {
      key: 'articleBeginning',
      title: '输入文章开头',
      description: '请输入需要续写的文章开头内容',
    },
    {
      key: 'continuationStyle',
      title: '选择续写风格',
      description: '选择您想要的续写风格，不同风格会产生不同的表达效果',
    },
    {
      key: 'continuationLength',
      title: '设置续写长度',
      description: '设置您希望续写的字符数量',
    },
    {
      key: 'submitButton',
      title: '开始续写',
      description: '点击此按钮开始AI文章续写过程',
    },
    {
      key: 'continuedResult',
      title: '查看续写结果',
      description: '生成完成后，您可以在此处查看和复制续写内容',
    },
  ];

  // 显示引导
  const showTour = () => {
    // 延迟显示，确保DOM已经渲染
    setTimeout(() => {
      setTourVisible(true);
    }, 100);
  };

  // 续写风格选项
  const continuationStyles = [
    { value: 'professional', label: '专业严谨', description: '适合学术或专业场合的正式表达' },
    { value: 'casual', label: '通俗易懂', description: '口语化表达，简单易懂' },
    { value: 'storytelling', label: '故事化', description: '富有叙事性，引人入胜' },
    { value: 'persuasive', label: '说服力', description: '增强观点说服力和感染力' },
    { value: 'creative', label: '创意表达', description: '新颖独特的表达方式' },
  ];

  // 处理续写风格变化
  const handleStyleChange = (value: string) => {
    setContinuationStyle(value);
  };

  // 处理续写长度变化
  const handleLengthChange = (value?: any) => {
    if (value !== undefined) {
      setContinuationLength(value);
    }
  };

  // 处理表单提交，进行文章续写
  const handleSubmit = async () => {
    try {
      const values = await form.validateFields();
      const articleBeginning = values.articleBeginning || '';

      if (!articleBeginning.trim()) {
        message.warning('请输入文章开头内容');
        return;
      }

      setLoading(true);
      setContinuedContent('');

      // 模拟API调用延迟
      setTimeout(() => {
        const continued = continueArticle(articleBeginning, continuationStyle, continuationLength);
        setContinuedContent(continued);
        setLoading(false);
        message.success('文章续写成功！');
      }, 2000);
    } catch (error) {
      setLoading(false);
      message.error('续写失败，请重试');
    }
  };

  // 重新续写
  const handleRewriteAgain = () => {
    if (!continuedContent) {
      message.warning('请先生成续写内容');
      return;
    }

    setLoading(true);

    // 模拟API调用延迟
    setTimeout(() => {
      const values = form.getFieldsValue();
      const articleBeginning = values.articleBeginning || '';
      const continued = continueArticle(articleBeginning, continuationStyle, continuationLength);
      setContinuedContent(continued);
      setLoading(false);
      message.success('重新续写成功！');
    }, 2000);
  };

  // 复制续写内容
  const handleCopyContent = (content: string) => {
    navigator.clipboard.writeText(content).then(() => {
      message.success('内容已复制到剪贴板');
    }).catch(() => {
      message.error('复制失败，请手动复制');
    });
  };

  // 文章续写的模拟函数
  const continueArticle = (beginning: string, style: string, length: number): string => {
    // 这里是模拟文章续写的逻辑，实际应用中应该调用AI模型

    // 示例续写内容，根据风格和长度生成
    const styleContinuations: Record<string, string> = {
      'professional': `\n\n经过深入研究和分析，我们发现这一现象背后有着复杂的机制。相关数据表明，该问题的产生与多种因素密切相关，包括市场环境的变化、技术迭代的速度以及用户需求的演变。\n\n进一步研究显示，当前解决方案在某些特定场景下仍存在优化空间。通过系统性的实验和验证，我们提出了一系列改进建议，旨在提升整体效能和用户体验。\n\n值得注意的是，这一领域的发展正呈现出加速的趋势，未来可能会面临新的挑战和机遇。持续关注行业动态，保持技术敏感度，将有助于我们在竞争中保持优势地位。`,
      'casual': `\n\n你知道吗，这个事儿其实挺有意思的。我发现啊，咱们刚才聊的这个话题，在日常生活中特别常见。就拿我身边的朋友来说，好多人都遇到过类似的情况。\n\n其实吧，解决这个问题也没有想象中那么难。关键是要找对方法，然后坚持下去。有时候换个角度想想，可能就会豁然开朗。\n\n总的来说，我觉得这个话题还是很值得探讨的。毕竟，它和我们每个人的生活都息息相关。不知道你是怎么看的呢？`,
      'storytelling': `\n\n故事要从一个平凡的早晨说起。阳光透过窗户洒在书桌上，空气中弥漫着咖啡的香气。这时候，门铃突然响了起来，打破了原本的宁静。\n\n开门一看，门外站着一个陌生人。他穿着一件褪色的风衣，手里拿着一个破旧的笔记本。"我是来兑现一个承诺的，"他声音低沉地说。\n\n接下来发生的事情完全超出了我的预料。这个看似普通的陌生人，竟然揭开了一个隐藏多年的秘密。而这个秘密，将彻底改变我的生活轨迹...`,
      'persuasive': `\n\n无疑，这是一个值得我们高度重视的问题。数据不会说谎，事实已经清楚地摆在我们面前。如果我们不采取行动，后果将不堪设想。\n\n重要的是，我们现在就有能力改变这一切。通过实施这些建议，我们不仅能够解决当前的问题，还能为未来的发展奠定坚实的基础。\n\n让我们携手共进，共同创造一个更加美好的明天。你的参与和支持，将是我们取得成功的关键。现在，是时候行动起来了！`,
      'creative': `\n\n思绪如同脱缰的野马，在想象的原野上自由驰骋。那些曾经模糊的画面，此刻变得清晰起来。色彩、声音、气味交织在一起，形成了一幅绚丽多彩的画卷。\n\n文字在指尖跳跃，仿佛有了生命一般。它们相互碰撞、融合，创造出全新的表达方式。每一个句子都像是一个音符，共同谱写出一曲动人的乐章。\n\n在这个充满无限可能的世界里，一切皆有可能。只要我们保持一颗好奇的心，敢于探索未知的领域，就能发现更多美丽的风景。`,
    };

    const continuation = styleContinuations[style] || styleContinuations.professional;

    // 根据长度调整续写内容
    const words = continuation.split('');
    const adjustedLength = Math.min(length, words.length);

    return beginning + words.slice(0, adjustedLength).join('');
  };

  // 获取当前选择的续写风格描述
  const getSelectedStyleDescription = (): string => {
    const selectedStyle = continuationStyles.find(s => s.value === continuationStyle);
    return selectedStyle ? selectedStyle.description : '';
  };

  return (
    <>
      <div style={{ padding: '24px' }}>
        <Typography>
          <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
            <Title level={1}>文章续写<TourGuideButton onClick={showTour} /></Title>
          </div>
          <Paragraph>
            输入文章开头，选择续写风格和长度，AI将为您生成后续内容。
          </Paragraph>
        </Typography>

        <Row gutter={[16, 16]}>
          <Col xs={24} md={12}>
            <Card title="文章开头与设置" size="small">
              <Form
                form={form}
                layout="vertical"
              >
                <Form.Item
                  label="文章开头内容"
                  name="articleBeginning"
                  rules={[{ required: true, message: '请输入文章开头内容' }]}
                >
                  <div ref={articleBeginningRef}>
                    <TextArea
                      rows={10}
                      placeholder="请输入文章开头内容"
                      maxLength={2000}
                      showCount
                    />
                  </div>
                </Form.Item>

                <Form.Item
                  label="续写风格"
                  name="continuationStyle"
                >
                  <div ref={continuationStyleRef}>
                    <Select
                      placeholder="请选择续写风格"
                      value={continuationStyle}
                      onChange={handleStyleChange}
                      style={{ width: '100%' }}
                    >
                      {continuationStyles.map(style => (
                        <Option key={style.value} value={style.value}>
                          {style.label}
                        </Option>
                      ))}
                    </Select>
                  </div>
                </Form.Item>

                <div style={{ marginBottom: '16px' }}>
                  <Paragraph type="secondary" style={{ margin: 0 }}>
                    {getSelectedStyleDescription()}
                  </Paragraph>
                </div>

                <Form.Item
                  label="续写长度（字符数）"
                  name="continuationLength"
                >
                  <div ref={continuationLengthRef}>
                    <InputNumber
                      min={200}
                      max={2000}
                      defaultValue={500}
                      onChange={handleLengthChange}
                      style={{ width: '100%' }}
                    />
                  </div>
                </Form.Item>

                <Form.Item>
                  <Space direction="vertical" style={{ width: '100%' }}>
                    <div ref={submitButtonRef}>
                      <Button
                        type="primary"
                        onClick={handleSubmit}
                        loading={loading}
                        block
                      >
                        {loading ? '续写中...' : '开始续写'}
                      </Button>
                    </div>
                    {continuedContent && (
                      <Button
                        icon={<RedoOutlined />}
                        onClick={handleRewriteAgain}
                        loading={loading}
                        block
                      >
                        {loading ? '重新续写中...' : '重新续写'}
                      </Button>
                    )}
                  </Space>
                </Form.Item>
              </Form>
            </Card>
          </Col>

          <Col xs={24} md={12}>
            <Card title="续写结果" size="small" ref={continuedResultRef}>
              {loading ? (
                <div style={{ textAlign: 'center', padding: '60px 0' }}>
                  <Spin size="large" />
                  <p style={{ marginTop: '16px' }}>正在进行文章续写，请稍候...</p>
                </div>
              ) : continuedContent ? (
                <div>
                  <div style={{ display: 'flex', justifyContent: 'flex-end', marginBottom: '16px' }}>
                    <Button
                      type="primary"
                      icon={<CopyOutlined />}
                      onClick={() => handleCopyContent(continuedContent)}
                    >
                      复制内容
                    </Button>
                  </div>
                  <TextArea
                    value={continuedContent}
                    rows={18}
                    readOnly
                    style={{ backgroundColor: '#fafafa' }}
                  />
                </div>
              ) : (
                <div style={{ textAlign: 'center', padding: '60px 0', color: '#999' }}>
                  续写结果将显示在这里
                </div>
              )}
            </Card>
          </Col>
        </Row>
      </div>

      <CommonTour
        open={tourVisible}
        onClose={() => setTourVisible(false)}
        steps={tourSteps}
        targetRefs={tourRefs}
      />
    </>
  );
};

export default ContinuationArticlePage;